<template>
    <div class="wrapper">
        <header>我的红包</header>
        <ul class="red_bag_list" v-if="redBags != null">
            <li class="red_bag" v-for="item in redBags">
                金额：{{ item.amount }}
            </li>
        </ul>
        <div class="no_red_bag" v-else>
            当前未有红包或红包已使用完<br/>
            请前往首页领取红包
        </div>
        <Footer></Footer>
    </div>

</template>

<script>
import Footer from '../components/Footer.vue'

export default{
    name: 'RedBag',
    data() {
        return {
            user: {},
            redBags: []
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        this.$axios.get('/EnvelopeController/listEnvelopeByUserId', {
            params: {
                userId: this.user.userId
            }
        }).then(response => {
            this.redBags = response.data.data;
        }).catch(error => {
            console.error(error);
        })
    },
    components: {
        Footer
    }
}
</script>

<style scoped>
.wrapper {
    width: 100%;
    height: 100%;
}

.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .red_bag_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 1vw;
}

.wrapper .red_bag_list .red_bag{
    width: 95%;
    height: 20vw;
    display: flex;
    border-width: 0px 0px 1px 0px ;
    border-color: rgb(218, 208, 208);
    border-style: solid;
    align-items: center;
    padding-left: 1vw;
}

.wrapper .no_red_bag {
    width: 100%;
    font-size: 20px;
}
</style>